<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>显示模式</title>
		<style>
		div{width:80px;
		height:25px;
			background-color: pink;
			margin: auto;
		}
		.ys{
			width: 65px;
			height: 25px;
			border: 10px solid red;
			margin: auto;
			text-align: center;
            display: block;		}
		span{
			width: 100px;
			height: 100px;
			background-color: green;
			text-align:center
			margin: auto;
			 display: block;
		}
		
		</style>
	</head>
	<body><!--
	显示模式：
	1.块元素
	比较霸道，单独占一行
	默认宽度和父盒子一样宽
	可以给盒子内设置水平居中
	块元素中可以包含行内元素和块元素
	div，p，h1~h6，o1，li，d1，dd，dt
	2.行内元素
	一行显示多个
	默认宽度与内容一样宽
	行内元素中只能装文本或其他行内元素
	span,de1,a
	针对链接标签
	>链接里不能再链接
	>特殊情况下可以给a标签设置宽高，并包含块元素，但需要做显示模式的转换
	3.行内块元素inline-block
	一行显示多个
	默认宽度和内容一样宽
	可以给元素设置宽高
	input,img,td
	元素显示模式的转换
	display: block;  转换成块元素
-->
		<div>hello div</div>
		<p class="ys">段落标签</p>
		<h4 class="span">4级标题</h4>
		<del class="span">删除线<del>
	</body>
</html>
